<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>清除浮动-table</title>
        <style>
            .clearfix:before{
                content:'';
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            /*IE8及以上浏览器清除浮动*/
            .clearfix{
                *zoom:1;
            }
            .clearfix:after {
              content: "";
              display: table;
              clear: both;
            }
            /* 兼容绝大多数浏览器 */
            .clearfix:after {
              visibility: hidden;
              display: block;
              font-size: 0;
              content: " ";
              clear: both;
              height: 0;
            }
            .clearfix { display: inline-block; }
            /* start commented backslash hack \*/
            * html .clearfix { height: 1%; }
            .clearfix { display: block; }
            /* close commented backslash hack */
            /* 下一步 */
            .clearfix:after {
              visibility: hidden;
              display: block;
              font-size: 0;
              content: " ";
              clear: both;
              height: 0;
            }
            * html .clearfix             { zoom: 1; } /* IE6 */
            *:first-child+html .clearfix { zoom: 1; } /* IE7 */
            /* 下一步 */
            .group:after {
              visibility: hidden;
              display: block;
              content: "";
              clear: both;
              height: 0;
            }
            * html .group             { zoom: 1; } /* IE6 */
            *:first-child+html .group { zoom: 1; } /* IE7 */
            /*下一步 我们正在需要的*/
            .group:before,
            .group:after {
              content: "";
              display: table;
            } 
            .group:after {
              clear: both;
            }
            .group {
              zoom: 1; /* For IE 6/7 (trigger hasLayout) */
            }
            /*未来我们可能这样清除浮动*/
            .group {
              display: flow-root;
            }
        </style>
    </head>
    <body>
        <p>.cf:after，.cf:before {content: " "; display: table;}</p>
        <p>.cf:after {clear: both;}</p>
        <p>：before是因为table类型能生成独立的bfc，防止上边距塌陷，</p>
        <p>：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。</p>
    </body>
</html>